import { hasToken } from '@/utils/token'
import React, { ComponentType } from 'react'
import { Redirect, Route, RouteProps } from 'react-router-dom'

// <AuthRoute path='/profile/edit' component={Edit} />
// AuthRoute组件 1.0 有了登录访问控制的功能
// =》 2.0   使用体验和Route完全相同（Route接受什么props  AuthRoute就接受什么props）
//              等价于 AuthRoute组件的props类型 和 Route组件的props类型 相同！！！
// => 3.0  比如 访问个人详情 被拦截到登录页  登录完成后， 希望去本来要去的页面-个人详情页

export default function AuthRoute({ component, ...rest }: RouteProps) {
  console.log(rest) // { a: 'a', b: 'b', exact: undefined, path: xxx }
  const Component = component as ComponentType

  return (
    <Route
      {...rest}
      render={(props) => {
        // console.log(props.location.pathname, 999) // 要访问的目标页面的路由地址(回跳地址)

        if (!hasToken()) {
          return (
            <Redirect
              to={{
                pathname: '/login',
                state: {
                  from: props.location.pathname,
                },
              }}
            />
          )
        }
        return <Component />
      }}
    ></Route>
  )
}
